<template>
  <u-popup v-model="leftShow" mode="left" @close="close">
    <view style="width: 80vw">
      <view
        class="screen"
        style="
          height: 100vh;
          background-color: #ffffff;
          border-radius: 20rpx;
          overflow: hidden;
        "
      >
        <view class="sideBg">
          <image
            :src="getImgSrc('/home/bg2@2x.png')"
            style="width: 100%"
            mode="widthFix"
          ></image>
        </view>
        <view class="sideContent">
          <view class="sideContent_avatar">
            <view class="sideContent_avatar_inner">
              <image
                class="avatar_img"
                :src="head || '../../../static/aidex/images/head.png'"
              ></image>
              <view class="sideContent_avatar_icon">
                <image
                  :src="getImgSrc('/hall/icon_pty_small@2x.png')"
                  mode="widthFix"
                ></image>
              </view>
            </view>

            <view class="avatar_mes">
              <view class="avatar_mes_text1">
                <text class="avatar_mes_text1_txt1">{{ data.nickName }}</text>
                <text
                  v-if="data.levelName"
                  class="avatar_mes_text1_txt1 vip"
                  :style="{
                    'background-image': `url(${getImgSrc(
                      '/hall/icon_v@2x.png'
                    )})`,
                  }"
                  >{{ data.levelName }}</text
                >
                <text class="avatar_mes_text1_txt2 mg-l-0">{{
                  data.mobile
                }}</text>
              </view>
              <view class="avatar_mes_text2">
                <template>
                  <image
                    :src="getImgSrc('/home/icon_exchange2@2x.png')"
                    style="height: 25rpx; margin-right: 10rpx"
                    mode="heightFix"
                  ></image>
                  <text @tap="switchUser">切换为用户</text>
                </template>
              </view>
            </view>
            <image
              @tap="triggerToJump('/pages/sys/user/runner-info')"
              :src="getImgSrc('/home/icon_right.png')"
              style="height: 30rpx"
              mode="heightFix"
            ></image>
          </view>
          <view class="sideContent_coupon">
            <view
              class="sideContent_coupon_mes"
              @tap="triggerToJump('/pages/sys/user/wallet')"
              :style="{
                'background-image': `url(${getImgSrc('/hall/_bg@2x.png')})`,
              }"
            >
              <view class="sideContent_coupon_mes_text1">
                {{ data.current || 0 }}
              </view>
              <view class="sideContent_coupon_mes_text2"> 账户余额（元） </view>
            </view>
            <!-- <view
              class="sideContent_coupon_mes"
              @tap="triggerToJump('/pages/sys/user/coupon')"
              :style="{
                'background-image': `url(${getImgSrc('/hall/_bg2@2x.png')})`,
              }"
            >
              <view class="sideContent_coupon_mes_text1">
                {{ data.couponCount }}
              </view>
              <view class="sideContent_coupon_mes_text2"> 优惠券（张） </view>
            </view> -->
          </view>
          <view class="sideContent_order">
            <view class="sideContent_order_title list-call">
              <view class="sideContent_order_title_txt1">我的订单</view>
              <view
                class="sideContent_order_title_txt2"
                @tap="gotoOrderList(0)"
              >
                <text
                  style="
                    color: #b5b5b5;
                    font-weight: 100;
                    font-size: 28rpx;
                    margin-right: 12rpx;
                  "
                  >全部</text
                >
                <image
                  :src="getImgSrc('/home/icon_right.png')"
                  style="height: 25rpx"
                  mode="heightFix"
                >
                </image>
              </view>
            </view>
            <view class="sideContent_order_list mg-t-30">
              <view class="sideContent_order_item" @tap="gotoOrderList(1)">
                <image
                  :src="getImgSrc('/home/icon_my_wait@2x.png')"
                  style="height: 56rpx; width: 56rpx"
                  mode="widthFix"
                ></image>
                <view>待确认</view>
              </view>
              <view class="sideContent_order_item" @tap="gotoOrderList(2)">
                <image
                  :src="getImgSrc('/hall/icon_my_process@2x.png')"
                  style="height: 56rpx; width: 56rpx"
                  mode="widthFix"
                ></image>
                <view>完成中</view>
              </view>
              <view class="sideContent_order_item" @tap="gotoOrderList(3)">
                <image
                  :src="getImgSrc('/hall/icon_my_complete@2x.png')"
                  style="height: 56rpx; width: 56rpx"
                  mode="widthFix"
                ></image>
                <view>已完成</view>
              </view>
            </view>
            <view
              style="
                width: 100%;
                border-bottom: 1rpx #999999 dashed;
                margin: 50rpx 0 25rpx;
              "
            ></view>
            <view class="sideContent_tab_list">
              <view
                class="sideContent_tab_item list-call"
                @tap="triggerToJump('/pages/sys/user/statistics')"
              >
                <image
                  :src="getImgSrc('/hall/icon_my_order@2x.png')"
                  style="height: 40rpx; width: 40rpx"
                  mode="widthFix"
                ></image>
                <view class="place_text"> 订单统计 </view>
                <image
                  :src="getImgSrc('/home/icon_right.png')"
                  style="height: 30rpx"
                  mode="heightFix"
                >
                </image>
              </view>

              <view class="sideContent_tab_item list-call" @tap="triggerToCall">
                <image
                  :src="getImgSrc('/home/icon_my_consult@2x.png')"
                  style="height: 40rpx; width: 40rpx"
                  mode="widthFix"
                ></image>
                <view class="place_text">客服
                </view>
                <image
                  :src="getImgSrc('/home/icon_right.png')"
                  style="height: 30rpx"
                  mode="heightFix"
                >
                </image>
              </view>
              <view
                class="sideContent_tab_item list-call"
                @tap="triggerToJump('/pages/sys/user/runner-message')"
              >
                <image
                  :src="getImgSrc('/home/icon_news@2x.png')"
                  style="height: 40rpx; width: 40rpx"
                  mode="widthFix"
                ></image>
                <view class="place_text"> 消息中心 </view>
                <image
                  :src="getImgSrc('/home/icon_right.png')"
                  style="height: 30rpx"
                  mode="heightFix"
                >
                </image>
              </view>
              <view
                class="sideContent_tab_item list-call"
                @tap="triggerToJump('/pages/sys/user/setting')"
              >
                <image
                  :src="getImgSrc('/home/icon_my_set@2x.png')"
                  style="height: 40rpx; width: 40rpx"
                  mode="widthFix"
                ></image>
                <view class="place_text"> 设置 </view>
                <image
                  :src="getImgSrc('/home/icon_right.png')"
                  style="height: 30rpx"
                  mode="heightFix"
                >
                </image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </u-popup>
</template>
<script>
import { login, checkLogin } from "@/common/util.js";
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      leftShow: false,
      data: {
        couponCount: 0,
        current: 0,
        levelName: "",
        mobile: "",
        nickName: "",
      },
    };
  },

  watch: {
    show(val) {
      if (val) {
        this.leftShow = true;
        this.initData();
      } else {
        this.leftShow = false;
      }
    },
  },
  computed: {
    head() {
      return this.vuex_user.head;
    },
    phone() {
      return this.vuex_client.appletCode || "";
    },
  },
  created() {
    this.initData();
  },
  methods: {
    switchUser() {
      this.$u.vuex("vuex_flag", "user");
      this.redirct("/pages/sys/home/index");
    },
    async initData() {
      // 获取优惠券
      this.$u.api.getRunnerUserInfo().then((res) => {
        if (res.code == 200) {
          this.data = res.data;
        }
      });
    },
    async queryHasRunningPermission() {
      const data = await this.$u.api.queryRealNameProcess();
      return data.data && data.data.type === 5;
    },
    goLogin() {
      this.leftShow = false;
      login();
      // checkLogin(true, () => {
      //   this.leftShow = false;
      // });
    },
    gotoOrderList(e) {
      this.close();
      this.$emit("onTrigger", e);
    },

    close() {
      this.leftShow = false;
      this.$emit("close", false);
    },
    reLaunch(url) {
      uni.reLaunch({
        url: url,
      });
    },
    redirct(url) {
      uni.redirectTo({
        url: url,
      });
    },
    triggerToJump(url) {
      uni.navigateTo({
        url: url,
      });
      this.close();
    },
    triggerToCall(){
      call(this.phone)
    }
  },
};
</script>
<style lang="scss">
.place_text a {
  text-decoration: none;
  color: #333;
}

.sideBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.sideContent {
  position: relative;
  width: 100%;
  z-index: 1;
  padding-top: 100rpx;
}

.sideContent_avatar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 40rpx;
  &_inner {
    width: 140rpx;
    height: 140rpx;
    position: relative;
  }
  &_icon {
    width: 44rpx;
    height: 44rpx;
    position: absolute;
    bottom: -6rpx;
    right: -6rpx;
    background: #4e95fc;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 30rpx;
      height: 30rpx;
      object-fit: contain;
    }
  }
}

.avatar_img {
  flex: 0 0 140rpx;
  width: 140rpx;
  height: 140rpx;
  border: 4rpx solid #ffffff;
  border-radius: 50%;
}

.avatar_mes {
  flex: 1;
  margin-left: 18rpx;
}

.avatar_mes_text1_txt1 {
  font-size: 30rpx;
  color: #282828;
  font-weight: 800;
  display: inline-block;
  vertical-align: bottom;
  line-height: 1;
}
.vip {
  display: inline-block;
  width: 50rpx;
  height: 30rpx;
  background-size: contain;
  text-align: center;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: bold;
  font-style: italic;
  color: #664520;
  line-height: 40rpx;
  margin: 0 6rpx 0 9rpx;
}

.avatar_mes_text1_txt2 {
  font-size: 26rpx;
  color: #4b4b4b;
  display: inline-block;
  vertical-align: bottom;
  line-height: 1;
}

.avatar_mes_text2 {
  font-size: 28rpx;
  color: #4b4b4b;
  margin-top: 30rpx;
}

.sideContent_coupon {
  display: flex;
  width: 560rpx;
  height: 150rpx;
  margin: 48rpx auto 59rpx;
}

.sideContent_coupon_mes {
  flex: 0 0 280rpx;
  background-repeat: no-repeat;
  background-size: 280rpx 150rpx;
  background-position: center;
  color: #ffffff;
  padding: 24rpx 0 0 60rpx;
}

.sideContent_coupon_mes_text1 {
  font-size: 34rpx;
  line-height: 1;
}

.sideContent_coupon_mes_text2 {
  font-size: 26rpx;
  margin-top: 14rpx;
  line-height: 1;
}

.sideContent_order_title {
  padding: 0 34rpx 0 53rpx;
  font-size: 30rpx;
  color: #282828;
  font-weight: 800;
  display: flex;
  justify-content: space-between;
}

.sideContent_order_title_txt1 {
  line-height: 44rpx;
}

.sideContent_order_title_txt2 {
  line-height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.sideContent_order_list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 24rpx;
}

.sideContent_order_item {
  flex: 0 0 25%;
  text-align: center;
  font-size: 24rpx;
  color: #333333;
}

.sideContent_tab_list {
  padding: 0 40rpx;

  .sideContent_tab_item {
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    image:first-child {
      margin-right: 15rpx;
    }

    image:last-child {
      margin-left: auto;
    }
  }
}

.site_item {
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #ddd;
}
</style>
